<template>
  <div class="box" ref="targetElement">
    <div class="search-box" ref="searchBox">
      <div class="search-top-box">
        <div class="search-top-left-box">
          <el-form label-width="110px" ref="div" :inline="true" :model="formSearch" @submit.native.prevent
            class="demo-form-inline">
            <el-form-item label="售后工单编号">
              <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.after_sales_number"
                placeholder="输入售后工单编号"></el-input>
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_name"
                placeholder="输入项目名称"></el-input>
            </el-form-item>
            <el-form-item label="项目品牌">
              <el-select @change="onSearch(1)" v-model="formSearch.brand_id" filterable clearable placeholder="选择项目品牌"
                class="form-width">
                <el-option v-for="(item, idx) in brandList" :label="item.name" :value="item.id" :key="idx"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前进度">
              <el-select filterable @change="onSearch(1)" v-model="formSearch.after_status" clearable placeholder="选择当前进度"
                class="form-width">
                <el-option label="待处理" :value="1"></el-option>
                <el-option label="处理中" :value="2"></el-option>
                <el-option label="未完成" :value="4"></el-option>
                <el-option label="已完成" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <template v-if="moreSearchShow">
              <el-form-item label="限期整改时间">
                <el-date-picker @change="onSearch(1)" v-model="formSearch.deadline_date" type="daterange"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="项目编号">
                <el-input @change="onSearch(1)" clearable class="form-width" v-model="formSearch.project_number"
                  placeholder="输入项目编号"></el-input>
              </el-form-item>
              <el-form-item label="项目类型">
                <el-select filterable @change="onSearch(1)" v-model="formSearch.store_type_id" clearable placeholder="选择项目类型"
                  class="form-width">
                  <el-option v-for="(item, idx) in storeList" :label="item.store_type_name" :value="item.id"
                    :key="idx"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="售后截止日期">
                <el-date-picker @change="onSearch(1)" v-model="formSearch.warranty_deadline_date" type="daterange"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="是否在质保期内">
                <el-select filterable @change="onSearch(1)" v-model="formSearch.is_sell_by" clearable placeholder="选择是否质保"
                  class="form-width">
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="工程监理">
                <el-select @change="onSearch(1)" v-model="formSearch.engineering_supervision_id" filterable clearable
                  placeholder="选择工程监理" class="form-width">
                  <el-option v-for="(item, idx) in jlList" :label="item.name" :value="item.id" :key="idx"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker @change="onSearch(1)" v-model="formSearch.created_at" type="daterange"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="维修工程经理">
                <el-select @change="onSearch(1)" v-model="formSearch.engineering_manager_id" filterable clearable
                  placeholder="选择维修工程经理" class="form-width">
                  <el-option v-for="(item, idx) in gcList" :label="item.name" :value="item.id" :key="idx"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="售后责任判定">
                <el-select filterable @change="onSearch(1)" v-model="formSearch.responsible_party_id" clearable
                  placeholder="选择售后责任判定" class="form-width">
                  <el-option v-for="(item, idx) in responsibleParty" :label="item.name" :value="item.id"
                    :key="idx"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="售后完成时间">
                <el-date-picker @change="onSearch(1)" v-model="formSearch.completion_date" type="daterange"
                  range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div class="search-top-right-box">
          <p @click="moreSearchFunc">
            {{ moreSearchShow ? "收起" : "展开"
            }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "></i>
          </p>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button type="primary" @click="addFunc" v-if="$isPer(permission, ['afterSales_add'])">发起售后</el-button>
        </div>
      </div>
    </div>
    <!-- table -->
    <div class="page-list" ref="pageList">
      <div class="list-top-box">
        <div class="tab-box">
          <el-tabs v-model="formSearch.to_do" @tab-click="onSearch(1)">
            <el-tab-pane label="全部" name="0"></el-tab-pane>
            <el-tab-pane label="待处理" name="1"></el-tab-pane>
          </el-tabs>
        </div>
        <div class="list-top-box-right">
          <p class="list-top-box-left">
            已选 <span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }} 数据
          </p>
          <el-button type="primary" @click="exportVisible = true" :disabled="tableData.length == 0"
            v-if="$isPer(permission, ['afterSales_exportAfterSalesExcel'])">导出售后列表</el-button>
          <el-button type="primary" :disabled="bottonDisabled(2, 10)" @click="editFunc('wssh')"
            v-if="$isPer(permission, ['afterSales_completeContent'])">售后内容完善</el-button>
          <el-button type="primary" :disabled="bottonDisabled(8, 20)" @click="editFunc('fpgcjl')"
            v-if="$isPer(permission, ['afterSales_engineeringManager'])">分配工程经理</el-button>
          <el-button type="primary" :disabled="bottonDisabled(7, 30)" @click="editFunc('xcfk')"
            v-if="$isPer(permission, ['afterSales_feedback'])">现场反馈</el-button>
          <el-button type="primary" :disabled="bottonDisabled(8, 40)" @click="editFunc('zrpd')"
            v-if="$isPer(permission, ['afterSales_judge'])">责任判定</el-button>
          <el-button type="primary" :disabled="bottonDisabled(7, 50)" @click="editFunc('scwczp')"
            v-if="$isPer(permission, ['afterSales_successImg'])">上传完成照片</el-button>
        </div>
      </div>
      <div class="table-box" v-loading="tableLoading">
        <el-table ref="table" :header-cell-style="{
          background: '#FAFBFC',
          color: '#828A9D',
          textAlign: 'center',
        }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData" border highlight-selection-row
          @selection-change="handleSelectionChange" @row-click="handleHighlightChangeTable" height="100%">
          <el-table-column type="selection" width="80"></el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_shgdbh')" min-width="150px" fixed="left" prop="after_sales_number"
            label="售后工单编号" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button v-if="$isPer(permission, ['afterSales_detail'])" type="text"
                @click.stop="goToDetail(scope.row)">{{ scope.row.after_sales_number || '--'
                }}</el-button>
              <span v-else>{{ scope.row.after_sales_number || '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_xmmc')" min-width="180px" fixed="left" prop="project_name"
            label="项目名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_xmpp')" min-width="120px" fixed="left" prop="brand_name"
            label="项目品牌" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag :color="`${scope.row.brand_colour}`" style="color: #ffffff;">
                {{ scope.row.brand_name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_xmbh')" min-width="130px" prop="project_number" label="项目编号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_xmlx')" min-width="120px" prop="store_type_name" label="项目类型"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_shjzrq')" min-width="120px" prop="warranty_deadline_date"
            label="售后截止日期" show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_sfzzbqn')" min-width="120px" prop="is_sell_by" label="是否在质保期内"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.is_sell_by == 1 ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_fqr')" min-width="120px" prop="user_name" label="发起人"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_gcjl')" min-width="120px" prop="engineering_supervision_name"
            label="工程监理" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.engineering_supervision_name || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_dqjd')" min-width="90px" label="当前进度" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="speedDesc(3, scope.row)" placement="top">
                <span v-if="scope.row.after_sales_status == 10">待处理</span>
                <span v-else-if="scope.row.after_sales_status == 60">已完成</span>
                <span v-else>进行中</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_cjsj')" min-width="180px" prop="created_at" label="创建时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_sfxycjdh')" min-width="130px" prop="is_order_goods" label="是否需集采订货"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.is_order_goods == 1 ? '是' : '否' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_dcsj')" min-width="180px" prop="feedback_at" label="到场时间"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.feedback_at || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_wxgcjl')" min-width="120px" prop="repair_engineering_manager_name"
            label="维修工程经理" show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.repair_engineering_manager_name || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_xqzgsj')" min-width="120px" prop="deadline_date" label="限期整改时间"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.deadline_date || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_shzrpd')" min-width="130px" prop="responsible_party" label="售后责任判定"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.responsible_party || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_shlxhf')" min-width="130px" prop="problem_type" label="售后类型划分"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.problem_type || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_shnr')" min-width="180px" prop="problem_content" label="售后内容"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.problem_content || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_shwcsj')" min-width="120px" prop="completion_date" label="售后完成时间"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.completion_date || '--' }}</template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('sh_shsx')" min-width="90px" prop="after_sales_timeliness" label="售后时效"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.after_sales_timeliness }}天</template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-footer">
        <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
          @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 分配工程经理 -->
    <el-dialog destroy-on-close title="分配工程经理" :visible.sync="fpgcjlVisible" :modal-append-to-body="false"
      @close="visibleClose('fpgcjlForm')" :close-on-click-modal="false" width="460px">
      <el-form :model="fpgcjlRuleForm" :rules="fpgcjlRules" class="user-info" ref="fpgcjlForm" label-width="110px"
        label-position="top">
        <el-form-item label="维修工程经理" prop="engineering_manager_idx">
          <el-select filterable class="width-100" v-model="fpgcjlRuleForm.engineering_manager_idx" placeholder="请选择工程经理">
            <el-option v-for="(item, idx) in gcList" :key="idx" :label="item.name" :value="idx"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="fpgcjlSubmit('fpgcjlForm')"
          :loading="fpgcjlRuleForm.subimtLoading">提交</el-button>
        <el-button @click="visibleClose('fpgcjlForm')">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 上传完成照片 -->
    <el-dialog destroy-on-close title="上传完成照片" :visible.sync="scwczpVisible" :modal-append-to-body="false"
      @close="visibleClose('scwczpForm')" :close-on-click-modal="false" width="460px">
      <div class="scroll-view">
        <el-form :model="scwczpRuleForm" :rules="scwczpRules" ref="scwczpForm" label-position="top">
          <el-form-item label="完成照片/视频" prop="completion_file">
            <div class="file-list-box">
              <div class="file-item-box" v-for="(item, index) in scwczpRuleForm.completion_file" :key="index">
                <div class="el-icon-delete-box">
                  <i class="el-icon-error" @click="scwczpDelFileFunc(index)"></i>
                </div>
                <el-tooltip class="item" effect="dark" :content="item.name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" />
                </el-tooltip>
              </div>
              <el-upload multiple class="avatar-uploader" action="#" accept="image/*,video/*,.m4a,.mp3,.zip,.rar"
                :show-file-list="false" :auto-upload="false" list-type="picture-card" :on-change="scwczpChangeFile">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="scwczpSubmit('scwczpForm')"
          :loading="scwczpRuleForm.subimtLoading">提交</el-button>
        <el-button @click="visibleClose('scwczpForm')">关闭</el-button>
      </span>
    </el-dialog>
    <!-- 导出售后列表 -->
    <el-dialog :modal-append-to-body="false" title="导出售后字段选择" :visible.sync="exportVisible" width="680px"
      :before-close="exportCloseFunc">
      <el-checkbox class="checkbox-item" v-model="allChecked" @change="allCheckedChangeFunc">全选</el-checkbox>
      <div v-loading="exportLoading">
        <div class="export-scroll">
          <el-checkbox-group v-model="exportrVal">
            <el-checkbox class="checkbox-item" v-for="(item, index) in exportArr" :key="index" :label="item.label"
              border></el-checkbox>
          </el-checkbox-group>
        </div>
        <p v-if="exportUrl">导出文件链接：<el-button @click="$openUrlFunc(exportUrl[0])" type="text">{{
          exportUrl[1]
            }}</el-button></p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportSubmitFunc">提交</el-button>
        <el-button @click="exportCloseFunc">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import afterSalesApi from '@/api/afterSalesApi'
import brandApi from '@/api/brandApi'
import storeTypeApi from '@/api/storeTypeApi'
import configApi from '@/api/configApi'
import adminApi from '@/api/adminApi'
import { getUserInfo } from '@/utils/auth';
import { handleSpeedDesc } from "@/views/home/components/kj.js";
import { exportAfterSalesFideldArr } from '@/utils/exportField'

export default {
  name: "afterSalesManagement",
  data() {
    let validateFileList = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择完成照片/视频'));
      } else {
        callback();
      }
    };
    return {
      // 导出用户列表
      allChecked: false,//是否全选字段
      exportLoading: false,//导出loading
      exportVisible: false,//导出弹窗
      exportUrl: '',//导出url
      exportrVal: [],//导出勾选字段
      exportArr: exportAfterSalesFideldArr,//导出字段数组


      userInfo: {},
      brandList: [],
      storeList: [],
      responsibleParty: [],
      jlList: [],
      gcList: [],

      tableLoading: false,//列表loading
      tableData: [],//列表数据
      formSearch: {
        to_do: '0',
        after_status: '',
        brand_id: '',
        store_type_id: '',
        project_name: '',
        project_number: '',
        warranty_deadline_date: null,
        created_at: null,
        deadline_date: null,
        completion_date: null,
        engineering_supervision_id: '',
        engineering_manager_id: '',
        responsible_party_id: '',
        after_sales_number: '',
        is_sell_by: '',
      },//搜索form
      moreSearchShow: false,//
      page: 1,
      num: 10,
      total: 0,
      multipleSelection: [],//多选数据

      // 分配工程经理
      adminList: [],
      fpgcjlRuleForm: {
        id: '',
        engineering_manager_idx: '',
        subimtLoading: false,
      },
      fpgcjlRules: {
        engineering_manager_idx: { required: true, message: "请选择维修工程经理", trigger: "change" },
      },
      fpgcjlVisible: false,
      // 上传完成照片
      scwczpRuleForm: {
        id: '',
        completion_file: [],
      },
      scwczpRules: {
        completion_file: [{ required: true, validator: validateFileList, trigger: "change" }],
      },
      scwczpVisible: false,
      permission: [],//操作权限
    };
  },
  watch: {},
  computed: {
    speedDesc() {
      return (type, item) => {
        return handleSpeedDesc(type, item, this.userInfo);
      }
    }
  },
  activated() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    this.hrefQueryFunc(() => {
      this.onSearch();
    })
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  deactivated() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  mounted() {
    this.handleResize();
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    // 操作权限
    this.$getHtmlAuthority(this.$route.path).then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.hrefQueryFunc(() => {
      this.getList();
      this.getSearchList()
    })
    this.userInfo = getUserInfo();
  },
  methods: {
    handleResize() {
      const target = this.$refs.targetElement;
      const searchBox = this.$refs.searchBox;
      const pageList = this.$refs.pageList;
      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver(entries => {
        setTimeout(() => {
          console.log('元素变为:', searchBox.offsetHeight);
          // searchBox.offsetHeight + 'px'
          pageList.style.height = 'calc(100% - ' + (searchBox.offsetHeight + 15) + 'px)';
        }, 0);
      });
      // 开始观察目标元素
      resizeObserver.observe(target);

      // 存储 resizeObserver 实例，以便在组件销毁时停止观察
      this.resizeObserver = resizeObserver;
    },
    // 跳转判断的
    hrefQueryFunc(cb) {
      let query = this.$route.query;
      if (JSON.stringify(query) != "{}") {
        this.formSearch.project_name = query.project_name || '';//筛选项目名
        this.formSearch.after_status = Number(query.after_status) || '';//进度
        this.formSearch.to_do = query.to_do || '0';//是否待处理
      }
      cb && cb();
    },
    // 导出列表确认
    exportSubmitFunc() {
      let exportrVal = this.exportrVal;//已勾选
      let exportArr = this.exportArr;//所有字段
      let formSearch = this.formSearch;//列表筛选项
      if (!exportrVal.length) {
        this.$message({
          type: 'warning',
          message: "请勾选需要导出的字段"
        })
        return;
      }
      let field_list = [];//提交列表
      exportrVal.forEach(item => {
        let index = exportArr.findIndex(child => {
          return item == child.label;
        })
        if (index != -1) {
          field_list.push(exportArr[index].value);
        }
      })
      this.exportAfterSalesExcel({
        field_list,
      })
    },
    exportAfterSalesExcel(obj) {
      this.exportLoading = true;
      afterSalesApi.exportAfterSalesExcel(obj).then(res => {
        console.log(res, "导出售后列表")
        this.exportLoading = false;
        if (res.code == 200) {
          this.exportUrl = res.data;
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 导出字段全选
    allCheckedChangeFunc(e) {
      let exportrVal = [];
      console.log(e)
      let exportArr = this.exportArr;
      if (e) {
        exportArr.forEach(item => {
          exportrVal.push(item.label);
        })
        this.exportrVal = exportrVal//已选择字段
      } else {
        this.exportrVal = exportrVal//已选择字段
      }
    },
    // 关闭导出弹窗
    exportCloseFunc() {
      this.exportVisible = false;
      this.allChecked = false;
      this.exportrVal = [];
      this.exportUrl = '';
    },
    // 按钮权限
    bottonDisabled(where1, where2) {
      let multipleSelection = this.multipleSelection;
      if (multipleSelection.length != 1) return true
      let position_id = this.userInfo.position_id
      let change_status = multipleSelection[0].after_sales_status
      // position_id == where1 && 
      if (change_status == where2) {
        return false
      }
      return true
    },
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 搜索
    onSearch(page) {
      this.page = typeof page == 'number' ? page : this.page;
      this.getList();
    },
    // 翻页
    handleCurrentChange(page) {
      this.onSearch(page);
    },
    moreSearchFunc() {
      this.moreSearchShow = !this.moreSearchShow;
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    goToDetail(item) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/afterSalesManagementDetail",
        query: {
          sn: item.id
        }
      })
    },
    addFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/afterSalesManagementAdd",
        query: {
          route_title: '发起售后'
        }
      })
    },
    editFunc(type) {
      let item = this.multipleSelection[0];
      switch (type) {
        case 'wssh':
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: "/afterSalesManagementAdd",
            query: {
              route_title: '售后内容完善',
              sn: item.id
            }
          })
          break
        case 'fpgcjl':
          this.fpgcjlRuleForm.id = item.id
          this.fpgcjlVisible = true;
          break
        case 'xcfk':
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: "/siteFeedback",
            query: {
              sn: item.id
            }
          })
          break
        case 'zrpd':
          this.$store.commit('isEventTriggeredFunc', true);
          this.$router.push({
            path: "/liabilityJudgment",
            query: {
              sn: item.id
            }
          })
          break
        case 'scwczp':
        case 'fpgcjl':
          this.scwczpRuleForm.id = item.id
          this.scwczpVisible = true;
          break
      }

    },
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },


    // 获取列表数据
    getList() {
      this.tableLoading = true;
      let formSearch = this.formSearch
      afterSalesApi.getAfterSalesList({
        page: this.page,
        num: this.num,
        to_do: formSearch.to_do || 0,
        after_status: formSearch.after_status,
        brand_id: formSearch.brand_id,
        store_type_id: formSearch.store_type_id,
        project_name: formSearch.project_name,
        project_number: formSearch.project_number,
        warranty_deadline_date_start: formSearch.warranty_deadline_date ? formSearch.warranty_deadline_date[0] : '',
        warranty_deadline_date_end: formSearch.warranty_deadline_date ? formSearch.warranty_deadline_date[1] : '',
        created_at_start: formSearch.created_at ? formSearch.created_at[0] : '',
        created_at_end: formSearch.created_at ? formSearch.created_at[1] : '',
        deadline_date_start: formSearch.deadline_date ? formSearch.deadline_date[0] : '',
        deadline_date_end: formSearch.deadline_date ? formSearch.deadline_date[1] : '',
        completion_date_start: formSearch.completion_date ? formSearch.completion_date[0] : '',
        completion_date_end: formSearch.completion_date ? formSearch.completion_date[1] : '',
        engineering_supervision_id: formSearch.engineering_supervision_id,
        engineering_manager_id: formSearch.engineering_manager_id,
        responsible_party_id: formSearch.responsible_party_id,
        is_sell_by: formSearch.is_sell_by,
        after_sales_number: formSearch.after_sales_number,
      }).then((res) => {
        console.log(res, "获取列表");
        this.tableLoading = false;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.max;
        }
      }).catch((err) => {
        this.$message({
          message: err.message,
          type: "warning",
        });
      });
    },

    // 获取筛选的列表
    getSearchList() {
      // 获取品牌列表
      brandApi.getBrandList({
        page: 1,
        num: 999,
      }).then(res => {
        console.log(res, "获取品牌列表")
        if (res.code == 200) {
          this.brandList = res.data.list;
        }
      })
      // 获取门店列表
      storeTypeApi.getStoreTypeList({
        page: 1,
        num: 999,
      }).then((res) => {
        console.log(res, "获取门店列表");
        if (res.code == 200) {
          this.storeList = res.data.list;
        }
      })
      // 获取责任判定列表
      configApi.getList({
        page: 1,
        num: 999,
      }, 2).then((res) => {
        console.log(res, "获取责任判定列表");
        if (res.code == 200) {
          this.responsibleParty = res.data.list;
        }
      })
      // 获取工程监理列表
      adminApi.getAdminList({
        page: 1,
        num: 999,
        position_id_arr: [8],
        identity: 1,
      }).then((res) => {
        console.log(res, "获取工程监理列表");
        if (res.code == 200) {
          this.jlList = res.data.list;
        }
      })
      // 获取工程经理列表
      adminApi.getAdminList({
        page: 1,
        num: 999,
        position_id_arr: [7],
        identity: 2,
      }).then((res) => {
        console.log(res, "获取工程经理列表");
        if (res.code == 200) {
          this.gcList = res.data.list;
        }
      })
    },

    // 弹窗取消
    visibleClose(formName) {
      switch (formName) {
        case 'fpgcjlForm':
          this.$refs[formName].resetFields();
          this.fpgcjlVisible = false;
          break
        case 'scwczpForm':
          this.$refs[formName].resetFields();
          this.scwczpVisible = false;
          break
      }
    },

    // 分配维修工程经理
    fpgcjlSubmit(formName) {
      let fpgcjlRuleForm = this.fpgcjlRuleForm;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.fpgcjlRuleForm.subimtLoading = true;
          afterSalesApi.selectEngineeringManager({
            after_sales_id: this.fpgcjlRuleForm.id,
            engineering_manager_id: this.gcList[fpgcjlRuleForm.engineering_manager_idx].id,
            engineering_manager_name: this.gcList[fpgcjlRuleForm.engineering_manager_idx].name
          }).then(res => {
            if (res.code == 200) {
              this.onSearch();
              this.visibleClose(formName);
            }
            this.fpgcjlRuleForm.subimtLoading = false;
            this.$message({
              type: res.code == 200 ? "success" : "warning",
              message: res.code == 200 ? "操作成功" : res.message,
            });
          })
        }
      })
    },
    // 上传完成照片
    scwczpChangeFile(file) {
      this.scwczpRuleForm.completion_file.push(file)
    },
    scwczpDelFileFunc(index) {
      this.scwczpRuleForm.completion_file.splice(index, 1);
    },
    scwczpSubmit(formName) {
      let scwczpRuleForm = this.scwczpRuleForm;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.scwczpRuleForm.subimtLoading = true;
          let obj = {
            after_sales_id: scwczpRuleForm.id,
          }
          let formdata = new FormData();
          formdata.append('data', JSON.stringify(obj))
          scwczpRuleForm.completion_file.forEach(item => {
            formdata.append('completion_file[]', item.raw);
          })
          afterSalesApi.afterSalesRectification(formdata).then(res => {
            console.log(res, "上传完成照片")
            if (res.code == 200) {
              this.onSearch();
              this.visibleClose(formName);
            }
            this.scwczpRuleForm.subimtLoading = false;
            this.$message({
              type: res.code == 200 ? "success" : "warning",
              message: res.code == 200 ? "操作成功" : res.message,
            });
          })
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/listPage.scss';
</style>